[程式碼&DEMO] [HackMD完整筆記]

目標

使用browser內建的語音轉換的API「web speech api」來進行語音識別，並將結果顯示在頁面上。

步驟流程

整體來說就是用SpeechRecognition做語音識別，再透過interimResults來輸出識別的結果。

STEP1 建立語音識別物件SpeechRecognition

//把全域環境中的SpeechRecognition指定好,會依據瀏覽器不同而有所不同
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
// 建立一個變數來放為語音識別功能
const recognition = new SpeechRecognition();
//語音辨識後回傳的結果資訊
recognition.interimResults = true;
//設定辨識語言。
recognition.lang = 'zh-tw';

recognition.interimResults (預設為False)來控制語音辨識期間是否返回，若為true就會一直返回。
但若SpeechRecognitionResult.isFinal為true時，就會結束當前對話。

STEP2 建立輸出區

 let p = document.createElement('p');
 const words = document.querySelector('.words');
 words.appendChild(p);

在html中div class="word"的區域建立一個新的p標籤。得以顯示語音辨識的資料。

STEP3 對語音識別系統進行監聽

//監聽到回傳的results內容進行重新排列成字串
 recognition.addEventListener('result', e => {
    //// 把回傳的資料轉為array好坐後面的.map等操作
    const transcript = Array.from(e.results)
      // 透過map來取得回傳陣列中的第0筆
      .map(result => result[0])
      // 再取得第0筆中的transcript
      .map(result => result.transcript)
      // 用join把連結符號除掉
      .join('');
      
      //若提到poop, poo, shit, dump這些字詞就會自動轉換成大便圖樣
      const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '?');
      // 把回傳的內容放到p元素中
      p.textContent = poopScript;
      
      //語音是否暫停
      if (e.results[0].isFinal) {//用e.result[0].isFianl是否等於true來判定語音是否暫停
        //如果語音回傳已經結束，就再建立一個新的p元素來放下一段文字
        p = document.createElement('p');
        words.appendChild(p);
      }
  });
 // 監聽語音識別結束，結束則再開啟一個新的語音識別
  recognition.addEventListener('end', recognition.start);
 //啟動語音識別
  recognition.start();

打開console後可以在results[0][transcript]裡看到轉換後的內容。

學習筆記

SpeechRecognition.interimResults

建立一個新的SpeechRecognition物件。

屬性:

• SpeechRecognition
  繼承父介面 EventTarget 的屬性。

• SpeechRecognition.grammars
  回傳一組用來表示語法且可以被當前的 SpeechRecognition 解析的 SpeechGrammar 物件。

• SpeechRecognition.lang
  取得和設定當前 SpeechRecognition 使用的語言。
  若無特別指定，會使用lang 的預設值，或使用者裝置設定的語言。

• SpeechRecognition.continuous
  控制每個 recognition 會回傳連續的結果還是只回傳單一結果。
  預設為回傳單一結果 (false)

• SpeechRecognition.interimResults
  控制臨時結果是否回傳。 true 回傳，false 不回傳。
  臨時結果指的是所有非最終 (Final) 結果的結果。 (SpeechRecognitionResult.isFinal 特性為 false)

• SpeechRecognition.maxAlternatives
  設定每個結果中 SpeechRecognitionAlternative 物件的最大數量。預設值為 1。

• SpeechRecognition.serviceURI
  指定當前的 SpeechRecognition 使用哪個地區的語音辨識服務來辨識語音。
  預設為使用者裝置的預設語音服務

方法:

• SpeechRecognition.abort()
  Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a SpeechRecognitionResult.

• SpeechRecognition.start()
  Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.

• SpeechRecognition.stop()
  Stops the speech recognition service from listening to incoming audio, and attempts to return a SpeechRecognitionResult using the audio captured so far.